<template>
  <div class="common-layout">
<!--   aa -->
    <el-container >
      <el-header style="width: 100%;height: 72px;margin: 0 auto;padding: 20px;background-color: #fff;position: fixed;z-index: 10">
        <div style="width: 1200px;margin: 0 auto;background-color: #fff">
        <el-row :gutter="10">

          <el-col :span="4">
            <img src="/logo.png" alt="" style="width: 117px">
          </el-col>
          <el-col :span="10">
            <el-breadcrumb separator="/" style="margin: 0 auto">
              <el-breadcrumb-item>
                <el-button @click="router.push('/')" style="border: none!important;background-color: rgba(0,0,0,0)">
                  首页
                </el-button>
                <el-button @click="router.push('/buy')" style="border: none!important;background-color:  rgba(0,0,0,0)">
                  买号
                </el-button>
                <el-button @click="router.push('/sell')"
                           style="border: none!important;background-color:  rgba(0,0,0,0)">
                  卖号
                </el-button>
                <el-button @click="router.push('/identify')"
                           style="border: none!important;background-color:  rgba(0,0,0,0)">
                  鉴定
                </el-button>
                <el-button @click="router.push('/news')"
                           style="border: none!important;background-color:  rgba(0,0,0,0)">
                  游戏咨询
                </el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="搜索商品编号/商品描述">
            </el-input>
          </el-col>

          <el-col :span="4">
            <el-button style="border: none!important;background-color: rgba(0,0,0,0)" @click="router.push('/personal/details')">
              个人中心
            </el-button>
            <el-button style="border: none!important;" type="primary" @click="loginOrReg">
              登录/注册
            </el-button>
          </el-col>
        </el-row>
        </div>
      </el-header>
<!--      背景图设置-->
      <el-main  style="background:url('/backgroundImg.png');background-size: cover;
  background-position: center;background-repeat: no-repeat;">
<!--        登录弹窗-->
        <el-dialog style="padding:40px;width: 480px;height: 620px;background:linear-gradient(rgba(209,227,250,0.35),rgba(239,242,255,0.35))"
                   v-model="loginDialogVisible">
          <img src="/logo.png" style="height: 50px;margin-left: 150px;">
          <el-card style="width: 400px; height: 450px;background:linear-gradient(rgba(209,227,250,0.8),rgba(239,242,255,0.8))">
            <el-radio-group style="margin-bottom: 15px;" v-model="type" @change="isShowLogin">
              <el-radio-button value="10" size="large">注册</el-radio-button>
              <el-radio-button value="20" size="large">登录</el-radio-button>
            </el-radio-group>
            <el-form>
              <el-form-item v-if="showLogin">
                <el-input placeholder="请输入用户名" style="height: 50px" v-model="regUser.username">
                </el-input>
              </el-form-item>
              <el-form-item v-if="showLogin">
                <el-input placeholder="请输入密码" style="height: 50px" v-model="regUser.password1">
                </el-input>
              </el-form-item>
              <el-form-item v-if="showLogin">
                <el-input placeholder="请确认密码" style="height: 50px" v-model="regUser.password2">
                </el-input>
              </el-form-item>
              <el-form-item v-if="!showLogin">
                <el-input placeholder="请确认登录" style="height: 50px" v-model="loginUser.username">
                </el-input>
              </el-form-item>
              <el-form-item v-if="!showLogin">
                <el-input placeholder="请输入密码" style="height: 50px;" v-model="loginUser.password">
                </el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-checkbox v-model="aggress"></el-checkbox>
              <span style="font-size: 14px"
                    v-if="showLogin">&nbsp; 未注册的手机号登录后自动创建氪金兽账号，登录即代表您已同意 </span>
              <span style="font-size: 14px" v-if="!showLogin">&nbsp; 登录即代表您已同意</span>
              <router-link to="/p/role" style="text-decoration: none;font-size: 14px"> 《用户协议》</router-link>
              <router-link to="/p/private" style="text-decoration: none;font-size: 14px"> 《隐私政策》</router-link>

              <el-button type="primary" style="width: 320px;height: 55px;font-size: 18px;margin-left: 20px"
                         @click="confirmReg()" v-if="showLogin">注册
              </el-button>
              <el-button type="primary" style="width: 320px;height: 55px;font-size: 18px;margin-left: 20px"
                         @click="confirmLogin" v-if="!showLogin">登录
              </el-button>
            </template>
          </el-card>
        </el-dialog>
        <!--        子页面显示位置处-->
        <router-view/>
      </el-main >
      <div class="bgi">

      </div>
      <el-footer style="width: 100%;height: 248px;margin: 0 auto;padding: 20px;background-color: #fff">
        <div style="width: 1200px;margin: 0 auto;background-color: #fff">
        <el-row :gutter="10">
          <el-col :span="4">
            <img src="/logo.png" alt="" style="width: 160px">
          </el-col>
          <el-col>
            <el-button link><a href="https://www.kejinshou.com/p/about"
                               style="text-decoration: none; color: black;">关于我们</a></el-button>
            <el-button link><a href="https://www.kejinshou.com/p/rule"
                               style="text-decoration: none; color: black">服务协议</a></el-button>
            <el-button link><a href="https://www.kejinshou.com/p/private" style="text-decoration: none; color: black">隐私政策</a>
            </el-button>
            <el-text style="color: black; margin-left: 15px">公司名称：易号阁（长沙）网络科技有限公司
              商务合作邮箱：NB@yihaoge.com
            </el-text>
          </el-col>
          <el-col>
            <el-button link><a href="https://beian.miit.gov.cn/#/Integrated/index"
                               style="text-decoration: none; color: black">湘ICP备8888888888号-1</a></el-button>
            <img src="/guohui.png" style="margin-left: 15px">
            <el-text style="color: black">公安备案：</el-text>
            <el-button link><a href="https://beian.mps.gov.cn/#/query/webSearch"
                               style="text-decoration: none; color: black">88888888888888号</a></el-button>
            <el-text style="color: black; margin-left: 15px">网络文化经营许可证：</el-text>
            <el-button link><a href="https://file.kejinshou.com/static/images/official/www.jpg"
                               style="text-decoration: none; color: black">湘A8-88888888</a></el-button>
          </el-col>
        </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

const loginDialogVisible = ref(false)
const type = ref(10)
const showLogin = ref(true);
const isShowLogin = () => {
  if (type.value == 10) {
    showLogin.value = true;
  } else {
    showLogin.value = false
  }
}
const loginOrReg = () => {
  loginDialogVisible.value = true
}
const regUser = ref({
  username: '',
  password1: '',
  password2: ''
})
const loginUser = ref({
  username: '',
  password: '',
})
const aggress = ref(false)

const confirmReg = () => {
  if (!aggress.value) {
    ElMessage.error('请先同意协议')
  } else if (!(regUser.value.password1 == regUser.value.password2)) {
    ElMessage.error('两次密码输入不一致!')
  }
  aggress.value = false
  regUser.value = {}
}
const confirmLogin = () => {


  aggress.value = false
  loginUser.value = {}

}
</script>
<style>
.el-input__wrapper {
  background-color: #F2F5F9 !important;
}

</style>
